// 这是影院的组件
<template>
  <div>
    <div class="cinema-list">
      <!-- 隐藏头部 -->
      <div class="headBox">
        <div class="headNone">
          <div class="SiteBox" @click="clickCityBox()">
            <span>{{ this.$store.state.curCity }}</span>
            <i class="iconfont">&#xe733;</i>
          </div>
          <div class="cityBox">影院</div>
          <div class="fangDaJin">
            <i class="iconfont icon1">&#xe69d;</i>
          </div>
        </div>
        <div class="navBar">
          <div class="box1" @click="sholeClick()">全城</div>
          <div class="box2">
            最近去过
            <i class="iconfont">&#xe733;</i>
          </div>
        </div>
        <!-- 隐藏的全城 -->
        <transition
          mode="out-in"
          appear
          :duration="600"
          enter-active-class="animated zoomIn"
          leave-active-class="animated zoomOut"
        >
          <div class="wholeCity" v-if="isShow">
            <ul>
              <li>北京</li>
              <li>上海</li>
              <li>广州</li>
              <li>深圳</li>
              <li>湖南</li>
            </ul>
          </div>
        </transition>
      </div>

      <div class="mainBox">
        <div class="CityLi" v-for="(item,index) in filmCityName" :key="index">
          <div class="leftCity">
            <p>{{ item.name }}</p>
            <p>{{ item.address }}</p>
          </div>
          <div class="rightprice">
            <p class="p1">
              <i class="iconfont">&#xe600;</i>
              <span>{{item.lowPrice/100}}</span>起
            </p>
            <p class="p2">距离未知</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { mapState } from "vuex";
export default {
  name: "cinema",
  data() {
    return {
      filmCityName: [],
      isShow: false
    };
  },
  computed: {
    ...mapState(["curCity"])
  },
  watch: {
    // 有两个异步时，这个可以做监听
    // 监听城市变化会被调用一次
    curCity: {
      handler(newVal, oldVal) {
        if (newVal) {
          //有新城市调用一下方法，去拿新的城市数据 //没有新的值就用久的值
          this.getCity();
        }
      },
      // 默认进来一次，因为a去到b页面，a页面就会被销毁，这时再从b回到a，再次进来监听城市变化
      immediate: true
    }
  },
  template: {},
  methods: {
    // 显示全城
    sholeClick() {
      this.isShow = !this.isShow;
    },
    getCity() {
      Indicator.open("加载中...");
      // Indicator.open({
      //   text: "加载中...",
      //   spinnerType: "fading-circle" //加载图标类型
      // });

      axios
        .get("/api/films/cinemaCity", {
          params: {
            filmCity: this.curCity
          }
        })
        .then(res => {
          // Toast("拉取数据成功");
          var result = res.data;
          console.log(result);
          if (result.code === 0) {
            this.filmCityName = result.data;
          }
          Indicator.close();
        });
    },

    clickCityBox() {
      this.$router.push("/user/citySite");
      // this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss">
@import "@/style/common/px2rem.scss";
.cinema-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  // ===============头部==========
  .headBox {
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 540px;
    background: white;
    .headNone {
      display: flex;
      width: 100%;
      height: px2rem(45);
      background: #fff;
      .SiteBox {
        display: flex;
        float: left;
        width: 25%;
        height: 100%;

        span {
          display: flex;
          justify-content: center;
          align-items: center;
          width: px2rem(75);
          height: 100%;
          font-size: px2rem(16);
        }

        .iconfont {
          position: relative;
          margin-top: 50%;
          right: px2rem(10);
          top: px2rem(-32);
          font-size: px2rem(18);
        }
      }

      .cityBox {
        display: flex;
        width: 50%;
        height: 100%;
        justify-content: center;
        align-items: center;
        font-size: px2rem(18);
        float: left;
      }
      .fangDaJin {
        display: flex;
        width: 25%;
        height: 100%;
        flex-direction: column;
        float: left;
        justify-content: center;
        align-items: center;
        .icon1 {
          text-align: center;
          font-size: px2rem(24);
          line-height: px2rem(45);
        }
      }
    }
    .navBar {
      display: flex;
      background: white;
      width: 100%;
      height: px2rem(45);
      .box1 {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .box2 {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .iconfont {
          line-height: px2rem(45);
        }
      }
    }
    .wholeCity {
      width: 100%;
      height: px2rem(128);
      padding: px2rem(10);
      overflow-y: auto;
      border-top: px2rem(1) solid #eee;
      border-bottom: px2rem(1) solid #eee;
      background: #ccddcc;
      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        li {
          width: px2rem(80);
          height: px2rem(35);
          border: px2rem(1) solid #eee;
          margin-top: px2rem(10);
          line-height: px2rem(35);
          text-align: center;
        }
      }
    }
  }

  .mainBox {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: px2rem(90);
    margin-bottom: px2rem(50);
    overflow-y: auto;
    .CityLi {
      width: 100%;
      height: px2rem(75);
      padding: px2rem(15);
      .leftCity {
        width: 75%;
        display: flex;
        float: left;
        flex-direction: column;
        p {
          height: px2rem(20);
          line-height: px2rem(20);
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          &:nth-of-type(2) {
            font-size: px2rem(13);
            color: rgb(121, 125, 130);
            margin-top: px2rem(4);
          }
        }
      }
      .rightprice {
        display: flex;
        float: left;
        width: 25%;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .p1 {
          color: red;
          font-size: px2rem(12);

          span {
            font-size: px2rem(18);
          }
        }
        .p2 {
          font-size: px2rem(12);
          color: rgb(121, 125, 130);
          margin-top: px2rem(6);
        }
      }
    }
  }
}
</style>
